<template>
  <div class="accountadd">
    <h3>修改密码</h3>
    <hr />
    <p>
      <span>原始密码</span>
      <el-input
        placeholder="原始密码"
        v-model="oldpwd"
        show-password
        style="width: 300px"
      >
      </el-input>
    </p>
    <p>
      <span>新密码</span>
      <el-input
        placeholder="请输入密码"
        v-model="newpwd"
        show-password
        style="width: 300px"
      ></el-input>
    </p>
    <p>
      <span>确认密码</span>
      <el-input
        placeholder="请再次输入密码"
        v-model="newpwdcopy"
        show-password
        style="width: 300px"
      ></el-input>
    </p>
    <p>
      <span></span>
      <el-button type="primary" @click="changepwd">确定</el-button>
      <el-button type="primary" native-type="reset">重置</el-button>
    </p>
  </div>
</template>

<script>
import { checkoldpwd, mynewpwd } from "@/apis/users";
export default {
  data() {
    return {
      oldpwd: "",
      newpwd: "",
      newpwdcopy: "",
    };
  },
  methods: {
    changepwd() {
      if (!(this.newpwd == this.newpwdcopy)) {
        this.$message.error("两次密码不一致");
        return;
      }
      checkoldpwd({
        oldPwd: this.oldpwd,
        id: JSON.parse(window.localStorage.getItem("userid")),
      }).then((res) => {
        if (res.data.code == 0) {
          mynewpwd({
            newPwd: this.newpwd,
            id: JSON.parse(window.localStorage.getItem("userid")),
          }).then((resl) => {
            if (resl.data.code == 0) {
              this.$message({
                message: "修改成功，请重新登录",
                type: "success",
              });
              this.$router.push("/");
            } else {
              this.$message.error(resl.data.msg);
            }
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.accountadd {
  h3 {
    padding: 20px 0;
  }
  p {
    display: flex;
    margin: 20px;
    span {
      width: 100px;
      margin-right: 30px;
      text-align: right;
    }
  }
}
</style>